<template>
    <!-- 页面容器 -->
    <div class="header_information page-container">
        <!-- 头部信息区域 -->
        <el-row class="header_name">
            <!-- 标题 -->
            <el-col :span="24" class="header_text">
                <h1>组委会信息</h1>
            </el-col>
            <el-col :span="24">
                <div class="header_line"></div>
            </el-col>
        </el-row>
        <!-- 表格内容区域 -->
        <el-row>
            <!-- 组委会信息表单 -->
            <el-col :span="24">
                <h3 class="contnet_text">组委会信息</h3>
                <el-form :model="form" ref="i_data_ref" :rules="i_data_rules" label-width="100px">
                    <el-form-item label="组委会名称" prop="name">
                        <el-input placeholder="请填写单位名称" v-model="form.name" class="content_input" disabled />
                    </el-form-item>

                    <!-- 所在地区选择 -->
                    <el-form-item label="所在地区" prop="county">
                        <div class="select_region">
                            <ProvinceSelect v-model:economize="form.economize" v-model:market="form.market"
                                v-model:county="form.county" :showCounty="true" disabled />
                        </div>
                    </el-form-item>

                    <!-- 邮寄地址输入 -->
                    <div class="select_region">
                        <el-form-item label="邮寄地址" prop="address">
                            <el-input v-model="form.address" placeholder="请填写机构邮寄地址" class="content_input"
                                v-model.trim="inputValueTrim" disabled />
                        </el-form-item>
                    </div>

                    <!-- 联系方式区域标题 -->
                    <el-col :span="24">
                        <h3 class="contnet_text">联系方式</h3>

                        <el-form-item label="联系人姓名" prop="headName">
                            <el-input placeholder="请输入联系人姓名" v-model="form.headName" class="content_input"
                                v-model.trim="inputValueTrim" disabled />
                        </el-form-item>

                        <el-form-item label="电话号码" prop="headPhone">
                            <el-input placeholder="请输入联系人电话号码" v-model="form.headPhone" class="content_input"
                                v-model.trim="inputValueTrim" disabled />
                        </el-form-item>

                        <el-form-item label="联系邮箱" prop="headEmail">
                            <el-input placeholder="请输入联系人电子邮箱" v-model="form.headEmail" class="content_input"
                                v-model.trim="inputValueTrim" disabled />
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
// 导入组件和API
import ProvinceSelect from "@/components/province-select/index.vue";
import { onMounted, ref } from "vue";
import { getInformation } from '@/api/manage/competition/index'
// 基本信息
const form = ref({});
const getInformationData = async () => {
    const res = await getInformation()
    if (res.success === true) {
        form.value = res.entity
    }
}
// 接口回来的时候 form.value = xxxxx
onMounted(() => {
    getInformationData()
})
</script>

<style lang="scss" scoped>
:deep(.el-space__item) {
    width: 100%;

    &:nth-child(3) {
        margin: 0 !important;
    }
}

.header_information {
    padding: 20px;

    .header_name {
        margin-left: 10px;
        margin-right: 10px;

        .header_text {
            margin-left: -10px;
            margin-right: -10px;
        }

        h1 {
            font-size: 28px;
        }
    }

    .header_line {
        display: block;
        height: 1px;
        width: 100%;
        margin: 24px 0;
        background-color: #8473f717;
    }

    .contnet_text {
        margin-bottom: 14px;
    }

    .content_input {
        width: 500px;
    }

    :deep(.el-input__wrapper) {
        padding: 0 15px;
    }

    :deep(.el-input.is-disabled) .el-input__inner {
        background-color: #f5f5f5;
    }

    .select_region {
        width: 500px;
        display: flex;
        justify-content: space-between;

        .el_form_content_text {
            width: 500px;
            height: 120px;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;

            .content_text_relation {
                font-size: 14px;
            }

            .content_text_contacts {
                color: #000;
                font-weight: bold;
            }

            span {
                color: #202020;
                font-size: 14px;
            }
        }
    }

    :deep(.el-input) {
        height: 40px;
    }

    .content_select {
        width: 160px;
    }

    // 保存信息按钮
    .save_btn {
        margin-left: 100px;
    }
}
</style>